﻿
@{
    ViewBag.Title = "首页";
}
@section CSS{
    <link rel="stylesheet" href="~/Content/AdminLTE/plugins/jvectormap/jquery-jvectormap.css">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" href="~/Content/AdminLTE/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">


    <!-- Morris chart -->
    <link rel="stylesheet" href="~/Content/AdminLTE/plugins/morris.js/morris.css">
    <style>
        sup {
            font-size: 20px;
            font-weight: 500;
            top: -.1em;
            margin-left: 5px;
        }

            sup label {
                font-size: 16px;
                font-weight: 500;
            }
    </style>
}
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            首页
            <small>&nbsp;</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            @*<li class="active"></li>*@
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-3 col-sm-3 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-red"><i class="ion ion-android-bus"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">待发货</span>
                        <span class="info-box-number">@ViewBag.order_shipping<small></small></span>
                        <span class="info-box-text">￥@ViewBag.order_shipping_money<small>元</small></span>
                        @*<a href="/Finance/FinanceCheck">查看明细</a>*@

                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <div class="col-md-3 col-sm-3 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-yellow"><i class="ion-social-buffer"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">待提现</span>
                        <span class="info-box-text">用户提现：<b>@ViewBag.user_withdrawal</b></span>
                        <span class="info-box-text">商家提现：<b>@ViewBag.shop_withdrawal</b></span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <div class="col-md-3 col-sm-3 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-aqua"><i class="ion-android-checkbox-outline"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">待审核 </span>
                        <span class="info-box-text">商家入驻：<b>@ViewBag.shop_check</b></span>
                        <span class="info-box-text">商家账户：<b>@ViewBag.shop_bankcard_check</b></span>

                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <div class="col-md-3 col-sm-3 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-yellow"><i class="ion ion-ios-timer-outline"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">待结算</span>
                        <span class="info-box-number">@ViewBag.settlement_number</span>
                        <span class="info-box-text">￥@ViewBag.settlement_money<small>元</small></span>
                        @*<a href="/Finance/FinanceCheck">查看明细</a>*@

                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            @*<div class="col-md-3 col-sm-3 col-xs-12">
                <div class="info-box">
                    <span class="info-box-icon bg-yellow"><i class="ion ion-md-exit"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">待分享</span>
                        <span class="info-box-number">444<small>元</small></span>
                    </div>
                </div>
            </div>*@
            <!-- /.col -->
            <!-- fix for small devices only -->
            <div class="clearfix visible-sm-block"></div>
        </div>

        <div class="row">
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-aqua">
                    <div class="inner">
                        <h3>@ViewBag.order_today<sup>（<label>总</label> @ViewBag.order_total）</sup></h3>
                        <p>新增订单</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-stats-bars"></i>
                    </div>
                    <a href="/Order/List" class="small-box-footer">详情 <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-green">
                    <div class="inner">
                        <h3>@ViewBag.goods_today<sup>（<label>总</label> @ViewBag.goods_total）</sup></h3>
                        <p>新增商品</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-bag"></i>
                    </div>
                    <a href="/Goods/List" class="small-box-footer">详情 <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-yellow">
                    <div class="inner">
                        <h3>@ViewBag.user_today<sup>（<label>总</label> @ViewBag.user_total）</sup></h3>
                        <p>新增用户</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-person-add"></i>
                    </div>
                    <a href="/User/List" class="small-box-footer">详情 <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-red">
                    <div class="inner">
                        <h3>@ViewBag.vip_today <sup>（<label>总</label> @ViewBag.vip_total）</sup></h3>
                        <p>新增会员</p>
                    </div>
                    <div class="icon">
                        <i class="ion-android-contact"></i>
                    </div>
                    <a href="/Finance/UserVip" class="small-box-footer">详情<i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->-
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="nav-tabs-custom">
                    <!-- Tabs within a box -->
                    <ul class="nav nav-tabs pull-right">
                        <li><a href="#sales-chart-year" data-toggle="tab">年</a></li>
                        <li  class="active"><a href="#sales-chart-month" data-toggle="tab">月</a></li>
                        <li><a href="#sales-chart-day" data-toggle="tab">日</a></li>
                        <li class="pull-left header"><i class="fa  fa-bar-chart-o"></i> 订单</li>
                    </ul>
                    <div class="tab-content ">
                        <!-- Morris chart - Sales -->
                        <div class="chart tab-pane" id="sales-chart-day" style="position: relative; height: 300px;"></div>
                        <div class="chart tab-pane active" id="sales-chart-month" style="position: relative; height: 300px;"></div>
                        <div class="chart tab-pane " id="sales-chart-year" style="position: relative; height: 300px;"></div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <i class="fa  fa-cubes"></i>
                        <h3 class="box-title">商品</h3>
                    </div>
                    <div class="box-body">
                        <div id="goods-chart" style="height: 300px;"></div>
                    </div>
                    <!-- /.box-body-->
                </div>
            </div>

        </div>
        <!-- Main row -->
        <!-- /.row (main row) -->
    </section>
    <!-- /.content -->
</div>
@section JS{
    <script src="~/Content/AdminLTE/plugins/jQueryUI/jquery-ui.min.js"></script>
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
    @*<script>$.widget.bridge('uibutton', $.ui.button);</script>*@
    <!-- Sparkline -->
    <script src="~/Content/AdminLTE/plugins/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
    <!-- Bootstrap WYSIHTML5 -->
    <script src="~/Content/AdminLTE/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
    <!-- Morris.js charts -->
    @*<script src="~/Content/AdminLTE/plugins/raphael/raphael.min.js"></script>
    <script src="~/Content/AdminLTE/plugins/morris.js/morris.min.js"></script>*@
    <!-- jvectormap -->
    <script src="~/Content/AdminLTE/plugins/jvectormap/jquery-jvectormap.min.js"></script>
    <script src="~/Content/AdminLTE/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>

    <!-- jQuery Knob Chart -->
    <script src="~/Content/AdminLTE/plugins/jquery-knob/dist/jquery.knob.min.js"></script>
    <script src="~/Content/AdminLTE/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
    @*<script src="~/Content/AdminLTE/dist/js/pages/dashboard.js"></script>*@

    <script src="~/Content/AdminLTE/plugins/flot/jquery.flot.js"></script>
    <script src="~/Content/AdminLTE/plugins/flot/jquery.flot.resize.js"></script>
    <script src="~/Content/AdminLTE/plugins/flot/jquery.flot.pie.js"></script>
    <script src="~/Content/AdminLTE/plugins/flot/jquery.flot.categories.js"></script>
    <script>
        $(function () {
            var order_day = [
                { label: '直接购买 (@ViewBag.order_GOD_today/￥@ViewBag.order_GOD_today_money)', data: @ViewBag.order_GOD_today, color: '#1E90FF' },
                { label: '拼 手 气 (@ViewBag.order_GOG_today/￥@ViewBag.order_GOG_today_money)', data:@ViewBag.order_GOG_today , color: '#3c8dbc' },
                { label: '趣卡专享 (@ViewBag.order_GMD_today/￥@ViewBag.order_GMD_today_money)', data: @ViewBag.order_GMD_today, color: '#0073b7' },
                { label: '合体免单 (@ViewBag.order_GFD_today/￥@ViewBag.order_GFD_today_money)', data: @ViewBag.order_GFD_today, color: '#00c0ef' }
            ];
            var order_month = [
                 { label: '直接购买 (@ViewBag.order_GOD_month/￥@ViewBag.order_GOD_month_money)', data: @ViewBag.order_GOD_month, color: '#1E90FF' },
                { label: '拼 手 气 (@ViewBag.order_GOG_month/￥@ViewBag.order_GOG_month_money)', data:@ViewBag.order_GOG_month , color: '#3c8dbc' },
                { label: '趣卡专享 (@ViewBag.order_GMD_month/￥@ViewBag.order_GMD_month_money)', data: @ViewBag.order_GMD_month, color: '#0073b7' },
                { label: '合体免单 (@ViewBag.order_GFD_month/￥@ViewBag.order_GFD_month_money)', data: @ViewBag.order_GFD_month, color: '#00c0ef' }
            ];
            var order_year = [
                 { label: '直接购买 (@ViewBag.order_GOD_year/￥@ViewBag.order_GOD_year_money)', data: @ViewBag.order_GOD_year, color: '#1E90FF' },
                { label: '拼 手 气 (@ViewBag.order_GOG_year/￥@ViewBag.order_GOG_year_money)', data:@ViewBag.order_GOG_year , color: '#3c8dbc' },
                { label: '趣卡专享 (@ViewBag.order_GMD_year/￥@ViewBag.order_GMD_year_money)', data: @ViewBag.order_GMD_year, color: '#0073b7' },
                { label: '合体免单 (@ViewBag.order_GFD_year/￥@ViewBag.order_GFD_year_money)', data: @ViewBag.order_GFD_year, color: '#00c0ef' }
            ];
            var goods_all = [
                { label: '普通 (@ViewBag.goods1_total)', data: @ViewBag.goods1_total, color: '#009100' },
                { label: '趣卡 (@ViewBag.goods3_total)', data: @ViewBag.goods3_total, color: '#01B468' },
                { label: '免单 (@ViewBag.goods2_total)', data: @ViewBag.goods2_total, color: '#00BB00' }
            ];
            var goods_sale = [
                { label: '出售中 (@ViewBag.goods_publish)', data: @ViewBag.goods_publish, color: '#006030' },
                { label: '已售罄 (@ViewBag.goods_no_stock)', data: @ViewBag.goods_no_stock, color: '#01B468' },
                { label: '已下架 (@ViewBag.goods_no_publish)', data: @ViewBag.goods_no_publish, color: '#019858' }
            ];
            $.plot('#sales-chart-day', order_day, {
                series: {
                    pie: {
                        show: true,
                        radius: 1,
                        innerRadius: 0.5,
                        label: {
                            show: true,
                            radius: 3/4,
                            formatter: labelFormatter,
                            //threshold: 0.1
                        }

                    }
                }
                //,legend: {
                //    show: false
                //}
            });
            $.plot('#sales-chart-month', order_month, {
                series: {
                    pie: {
                        show: true,
                        radius: 1,
                        innerRadius: 0.5,
                        label: {
                            show: true,
                            radius: 3/4,
                            formatter: labelFormatter,
                            //threshold: 0.1
                        }

                    }
                }
                //,legend: {
                //    show: false
                //}
            });
            $.plot('#sales-chart-year', order_year, {
                series: {
                    pie: {
                        show: true,
                        radius: 1,
                        innerRadius: 0.5,
                        label: {
                            show: true,
                            radius: 3/4,
                            formatter: labelFormatter,
                            //threshold: 0.1
                        }

                    }
                }
                //,legend: {
                //    show: false
                //}
            });
            $.plot('#goods-chart', goods_sale, {
                series: {
                    pie: {
                        show: true,
                        radius: 1,
                        innerRadius: 0.5,
                        label: {
                            show: true,
                            radius: 3/4,
                            formatter: labelFormatter,
                            //threshold: 0.1
                        }

                    }
                }
                //,legend: {
                //    show: false
                //}
            });
            //$.plot('#goods-sale-chart', goods_sale, {
            //    series: {
            //        pie: {
            //            show: true,
            //            radius: 1,
            //            innerRadius: 0.5,
            //            label: {
            //                show: true,
            //                radius: 3/4,
            //                formatter: labelFormatter,
            //                threshold: 0.1
            //            }

            //        }
            //    },
            //    legend: {
            //        show: false
            //    }
            //});
            /*
             * END DONUT CHART
             */
        });
        function labelFormatter(label, series) {
            return '<div style="font-size:11px; text-align:center; padding:2px; color: #fff; font-weight: 600;">'
                //+ label
                + '<br>'
                + Math.round(series.percent) + '%</div>'
        }
    </script>
}